import React from 'react';
import { Button, Tooltip, message, Alert, Select, Input, DatePicker } from 'antd';
import { connect } from 'react-redux';
import List from './list';
import CommonListsIndex from '../../../components/CommonLists/index';
import SearchBar from 'src/components/SearchBar';
import services from '../../../services/api';

import moment from 'moment';
import { servicesSmp } from '../../../services/createServices';
const { RangePicker } = DatePicker;
class EventMonitorIndex extends CommonListsIndex {
  constructor(props) {
    super(props);
    this.api = 'eventMonitor';
    this.listsComponent = List;
    this.editComponent = '/monitor/event/id/detail';
    this.model_width = 900;
    this.queryParams = {};
    this.state = {
      ...this.state,
    };
  }
  resultOptions = [
    {
      code: 'pass',
      name: '通过',
    },
    {
      code: 'refuse',
      name: '拒绝',
    },
    {
      code: 'review',
      name: '复核',
    },
  ];
  componentDidMount() {
    this.freshQueryList();
  }
  freshQueryList = () => {
    const params = {
      ...this.queryParams,
      ...this.queryTableParams,
      ...this.queryPanigation,
      ...this.getTabParams(),
    };
    if (params.start) {
      params.startTime = moment(params.start[0]).format('YYYY-MM-DD HH:mm:ss');
      params.endTime = moment(params.start[1]).format('YYYY-MM-DD HH:mm:ss');
      delete params.start;
    }

    services[this.api].list(params).then((res) => {
      if (res.code === '0') {
        const { records, total } = res.data;
        const currentPage = params.current;
        const page = Math.ceil(total / this.queryPanigation.size);
        if (records && total && records.length === 0 && currentPage > page) {
          this.onChangePagination(page, 'current');
        } else {
          this.setState({
            ...res.data,
          });
        }
      } else {
        message.error(res.msg);
      }
      this.setState({
        loading: false,
      });
    });
  };
  getColumns = () => {
    return [
      {
        title: '请求ID',
        key: 'reqId',
        dataIndex: 'reqId',
        ellipsis: true,
        render: (text) => {
          return (
            <Tooltip title={text} placement='topLeft'>
              <div className='overflowtext'>{text}</div>
            </Tooltip>
          );
        },
      },
      {
        title: '请求时间',
        key: 'reqTime',
        dataIndex: 'reqTime',
        ellipsis: true,
        render: (text) => {
          return (
            <Tooltip title={text} placement='topLeft'>
              <div className='overflowtext'>{text}</div>
            </Tooltip>
          );
        },
      },
      {
        title: '项目',
        key: 'projectName',
        dataIndex: 'projectName',
        ellipsis: true,
        render: (text) => {
          return (
            <Tooltip title={text} placement='topLeft'>
              <div className='overflowtext'>{text}</div>
            </Tooltip>
          );
        },
      },
      {
        title: '策略',
        key: 'strategyName',
        dataIndex: 'strategyName',
        ellipsis: true,
        render: (text) => {
          return (
            <Tooltip title={text} placement='topLeft'>
              <div className='overflowtext'>{text}</div>
            </Tooltip>
          );
        },
      },
      {
        title: '策略版本',
        key: 'strategyVersion',
        dataIndex: 'strategyVersion',
        ellipsis: true,
        render: (text) => {
          return (
            <Tooltip title={text} placement='topLeft'>
              <div className='overflowtext'>{text}</div>
            </Tooltip>
          );
        },
      },
      {
        title: '策略包',
        key: 'strategyPackageName',
        dataIndex: 'strategyPackageName',
        ellipsis: true,
        render: (text) => {
          return (
            <Tooltip title={text} placement='topLeft'>
              <div className='overflowtext'>{text}</div>
            </Tooltip>
          );
        },
      },
      {
        title: '策略包版本',
        key: 'strategyPackageVersion',
        dataIndex: 'strategyPackageVersion',
        ellipsis: true,
        render: (text) => {
          return (
            <Tooltip title={text} placement='topLeft'>
              <div className='overflowtext'>{text}</div>
            </Tooltip>
          );
        },
      },
      {
        title: '决策结果',
        key: 'result',
        dataIndex: 'result',
        ellipsis: true,
        render: (text) => {
          return (
            <Tooltip
              title={this.resultOptions.map((it) => {
                if (it.code === text) {
                  return it.name;
                }
              })}
              placement='topLeft'
            >
              <div className='overflowtext'>
                {this.resultOptions.map((it) => {
                  if (it.code === text) {
                    return it.name;
                  }
                })}
              </div>
            </Tooltip>
          );
        },
      },
      {
        title: '用户ID',
        dataIndex: 'userId',
        key: 'userId',
        ellipsis: true,
        render: (text) => {
          return (
            <Tooltip title={text} placement='topLeft'>
              <div className='overflowtext'>{text}</div>
            </Tooltip>
          );
        },
      },
    ];
  };
  getSearchList = () => {
    return [
      {
        name: 'start',
        options: {},
        component: <RangePicker placeholder={['开始时间', '结束时间']} format='YYYY-MM-DD HH:mm:ss' />,
      },
      {
        name: 'projectName',
        component: <Input placeholder='项目' />,
      },
      {
        name: 'packageName',
        component: <Input placeholder='策略包名称' />,
      },
      {
        name: 'packageVersion',
        component: <Input placeholder='策略包版本' />,
      },
      {
        name: 'riskLevel',
        component: (
          <Select placeholder='决策结果'>
            {this.resultOptions &&
              this.resultOptions.map((it) => {
                return (
                  <Select.Option value={it.code} key={it.code}>
                    {it.name}
                  </Select.Option>
                );
              })}
          </Select>
        ),
      },
      {
        name: 'userId',
        component: <Input placeholder='用户Id' />,
      },
    ];
  };
  // 打开新窗口、页面的id
  getOpenParam = (record) => {
    return record.reqId;
  };

  render() {
    const ListsComponent = this.listsComponent;
    return (
      <div>
        <SearchBar
          searchList={this.getSearchList()}
          query={this.v}
          onChange={this.refreshFilter}
          reset={this.resetListAndSearch}
        />
        <div className='inner-content' style={{ marginTop: '10px' }}>
          <ListsComponent
            {...this.state}
            edit={this.edit}
            showDetail={this.showDetail}
            defaultColumns={this.state.defaultColumns}
            columns={this.getColumns()}
            onChangePagination={this.onChangePagination}
            rowKey={'reqId'}
          />
        </div>
      </div>
    );
  }
}

export default connect((state) => {
  return {
    codes: state.code || {},
  };
})(EventMonitorIndex);
